<template>
	<div
		class="wallet-header h-[67px] flex items-center mb-4 border-t-[1px] border-t-t-3 border-b-[1px] border-b-t-3">
		<base-image :src="`wallet-type/${type}.png`" class="w-[38px]" />
		<div class="shrink-0 mx-[12px]">
			<div class="text-t-1">
				<div class="text-t-1">
					{{ title || enumName(WalletType, type) }}
				</div>
				<div class="text-t-2 ml-1 text-lg" v-if="subtitle">({{ subtitle }})</div>
			</div>
			<div class="mt-1 text-xs text-t-3" v-if="text">{{ text }}</div>
		</div>
		<span class="flex-1"></span>
		<base-icon v-if="isLink" class="text-t-3 text-sm" name="go" />
	</div>
</template>

<script lang="ts" setup>
import { WalletType } from '@/enums'
import { enumName } from '@/utils'
import { BaseIcon, BaseImage } from '@/components/base'

defineProps({
	type: {
		type: Number,
		required: true
	},
	title: {
		type: String,
		default: ''
	},
	subtitle: {
		type: String,
		default: ''
	},
	text: {
		type: String,
		default: ''
	},
	isLink: {
		type: Boolean,
		default: true
	}
})
</script>
<style lang="scss" scoped></style>
